<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新手指引</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
</head>
<body>
<h1>新手指引</h1>
<h1 id="step1">第一步</h1>
<p>
    随机文字随机文字随机文字随机文字随机文字
    随机文字随机文字随机文字随机文字随机文字
    随机文字随机文字随机文字随机文字随机文字
    随机文字随机文字随机文字随机文字随机文字
    随机文字随机文字随机文字随机文字随机文字
    随机文字随机文字随机文字随机文字随机文字
    随机文字随机文字随机文字随机文字随机文字
    随机文字随机文字随机文字随机文字随机文字
    随机文字随机文字随机文字随机文字随机文字
</p>
<h1 id="step2">第二步</h1>
<p>
    肚子饿了，想吃好吃的
    肚子饿了，想吃好吃的
    肚子饿了，想吃好吃的
    肚子饿了，想吃好吃的
    肚子饿了，想吃好吃的
    肚子饿了，想吃好吃的
    肚子饿了，想吃好吃的
    肚子饿了，想吃好吃的
    肚子饿了，想吃好吃的
</p>
<h1 id="step3">第三步</h1>
<p>
    晚上想吃麦当劳
    晚上想吃麦当劳
    晚上想吃麦当劳
    晚上想吃麦当劳
    晚上想吃麦当劳
    晚上想吃麦当劳
    晚上想吃麦当劳
    晚上想吃麦当劳
    晚上想吃麦当劳
</p>

<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<script>
    const driver = window.driver.js.driver;

    const driverObj = driver({
        showProgress: true,
        allowClose: false,
        steps: [
            { element: '#step1', popover: { title: '第一步', description: '神秘的第一步', side: "bottom", align: 'start' }},
            { element: '#step2', popover: { title: '第二步', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
            { element: '#step3', popover: { title: '第三步', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "top", align: 'start' }},
            { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
        ],
        // onDestroyStarted is called when the user tries to exit the tour
        onDestroyStarted: () => {
            if (!driverObj.hasNextStep() || confirm("你确定不看完吗?")) {
                driverObj.destroy();
            }
        },
        onDestroyed: ()=> {
            console.log("用户已经阅读完毕！")
        }
    });

    driverObj.drive();
</script>
</body>
</html>